<!--
  文件描述：
  创建时间：2023/6/30 15:09
  创建人：LiCY
-->
<template>
  <div class="">
    <div id="OrderInformationChart"></div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'
let echarts = require('echarts')
export default {
  name: 'OrderInformationChart',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    data: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    // 这里存放数据
    return {
      data: [],
      chart: {},
      option: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {

  },
  // 方法集合
  methods: {
    chartInit() {
      this.chart = echarts.init(document.getElementById('OrderInformationChart'))
    },
    createData(val) {
      this.initValueTrendChart()
    },
    /**
     * 初始化控制图
     */
    initValueTrendChart() {
      let that = this
      // 指定图表的配置项和数据
      this.option = {
        series: [
          {
            type: 'gauge',
            startAngle: 85,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: '#464646'
              }
            },
            axisLine: {
              lineStyle: {
                width: 40
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: gaugeData,
            title: {
              fontSize: 14
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 50,
              color: 'inherit',
              borderColor: 'inherit',
              formatter: '{value}%'
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.option && this.chart.setOption(this.option)
      const myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    },
    handleWindowResize() {
      this.chart.resize()
    }
  },
  // 监控data中的数据变化
  watch: {
    data(val) {
      this.createData(val)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initValueTrendChart()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.chartInit()
    window.addEventListener('resize', this.handleWindowResize)
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>